<script>
//用来进行测试外部表单组件的vue表单，不需要的话可以删除
import OuterFormMixin from './OuterFormMixin';
export default {
	name: 'TestForm',
	mixins: [OuterFormMixin],
	data() {
		return {
			userForm: {
				name: '',
				age: '',
				sex: false,
			},
			disabled: false,
			rules: {
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
					{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
				],
				age: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
			},
		};
	},
	mounted() {
		this.formInit(this.userForm, 'ruleForm');
	},
};
</script>

<template>
	<el-form style="background: white" :model="userForm" :rules="rules" label-position="top" ref="ruleForm">
		<el-form-item label="姓名" prop="name">
			<el-input :disabled="_disabled" v-model="userForm.name" placeholder="请输入姓名"></el-input>
		</el-form-item>
		<el-form-item label="年龄" prop="age">
			<el-input :disabled="_disabled" type="number" v-model="userForm.age" placeholder="请输入年龄"></el-input>
		</el-form-item>
		<el-form-item label="性别" prop="sex">
			<el-radio-group :disabled="_disabled" v-model="userForm.sex">
				<el-radio :label="true">男</el-radio>
				<el-radio :label="false">女</el-radio>
			</el-radio-group>
		</el-form-item>
	</el-form>
</template>

<style scoped lang="less"></style>
